<template>
	<div class="searchBox"  :style="{paddingBottom:showBar?'50px':''}">
		<div class="search">
			<div class="headIcon" @click="getBack"><i class="iconfont  icon-youjiantou"></i></div>
			<div class="input-group">
				<i class="iconfont icon-sousuo1" @click="getSearch"></i>
				<input type="search" placeholder="搜索歌曲、歌手、专辑" v-model="seaValue">
			</div>
		</div>
		<div class="hotSong" v-show="isTrue">
			<h3>热门搜索</h3>
			<div class="textBox"><p v-for="(item,index) in searchSong" :key="index"  @click="hotSearch(item.first)">{{item.first}}</p></div>
		</div>
		<div class="authorBox">
			<div class="authorName" v-for="(item,index) in textSearch"  @click="songId(item.id,index)">
				<div class="textName">
					<p>{{item.name}}</p>
					<p>{{item.artists[0].name}} - {{item.album.name}}</p>
				</div>
				<div class="iconBox"><i class="iconfont" :class="playingIndex==index? 'icon-zanting':'icon-bofang'"></i></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:['curIndex'],
		data(){
			return{
				searchSong:[],
				seaValue:'',
				textSearch:[],
				isTrue:true,
				playList:[]
			}
		},
		methods:{
			getBack(){
				this.$router.go(-1)
			},
			
			getSearch(){
				if(this.seaValue==''){
					alert('请输入内容')
				}else{
					this.axios({
						url:'/search?keywords='+this.seaValue
					}).then(res=>{
						this.textSearch = res.data.result.songs
						this.playList = res.data.result.songs.map(e=>e.id)
						window.console.log(res)
					});
					this.isTrue = false;
				}
			},
			
			hotSearch(id){
				this.seaValue = id
				this.axios({
					url:'/search?keywords='+this.seaValue
				}).then(res=>{
					this.textSearch = res.data.result.songs
					this.playList = res.data.result.songs.map(e=>e.id)
					window.console.log(this.textSearch)
				});
				this.isTrue = false;
			},
			
			songId(id,index){
				let audioSrc = `https://music.163.com/song/media/outer/url?id=${id}.mp3`
				this.audio.transmit(audioSrc)
				
				this.axios({
					url:'/song/detail'+`?ids=${id}`
				}).then(res=>{
					console.log(res.data.songs)
					this.$store.commit("setCurrentSong",res.data.songs[0])
				})
				this.$store.commit("playListState",this.playList)
				this.$store.commit("setPlayingIndex",index)
			}
		},
		created(){
			this.axios({
				url:'search/hot'
			}).then(res=>{
				this.searchSong = res.data.result.hots
				window.console.log(res)
			});
		},
		computed:{
			showBar(){
				return this.$store.state.currentSong.al.id
			},
			playingIndex(){
				return this.$store.state.playingIndex
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchBox{
		.search{
			display: flex;
			padding: 15px 10px;
			border: 1px solid ghostwhite;
			.headIcon{
				.icon-youjiantou{
					font-size: 26px;
				}
			}
			.input-group{
				position: relative;
				margin-left: 12px;
				>i{
					position: absolute;
					z-index: 1;
					left: 10px;
					bottom: 6px;
				}
				>input{
					width: 300px;
					height: 30px;
					font-size: 14px;
					border-radius: 35px;
					border: 1px solid gainsboro;
					padding: 0 10px 0 30px;
					background-color: gainsboro;
				}
			}
		}
		.hotSong{
			text-align: left;
			padding: 15px 10px 0;
			>h3{
				font-size: 12px;
				line-height: 12px;
				color: #666;
			}
			.textBox{
				margin: 10px 0 7px;
				>p{
					display: inline-block;
					height: 32px;
					margin-right: 8px;
					margin-bottom: 8px;
					padding: 0 14px;
					font-size: 14px;
					line-height: 32px;
					color: #333;
					border: 1px solid silver;
					border-radius: 30px;
				}
			}
		}
		.authorBox{
			.authorName{
				text-align: left;
				padding: 6px 0 6px 12px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid ghostwhite;
				.textName{
					>p{
						width: 320px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					>p:first-child{
						line-height: 25px;
					}
					>p:last-child{
						font-size: 12px;
						color: #888;
						line-height: 18px;
					}
				}
				.iconBox{
					padding: 0 10px;
					>i{
						font-size: 22px;
						color: gray;
					}
				}
			}
		}
	}
</style>
